<template>
  <view class="coupon-list">
    <view class="coupon-tabs">
      <el-tabs v-model="activeTab" @change="tabChange">
        <el-tab-pane label="未使用" name="unused"></el-tab-pane>
        <el-tab-pane label="已使用" name="used"></el-tab-pane>
        <el-tab-pane label="已过期" name="expired"></el-tab-pane>
      </el-tabs>
    </view>
    
    <view class="coupon-container">
      <view class="coupon-item" v-for="(coupon, index) in couponList" :key="index" 
            :class="{ 'expired': coupon.status === 2 }">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="amount-symbol">¥</text>
            <text class="amount-value">{{ coupon.amount }}</text>
          </view>
          <view class="coupon-condition">{{ coupon.conditionText }}</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-name">{{ coupon.name }}</view>
          <view class="coupon-time">{{ coupon.validTime }}</view>
          <view class="coupon-action" v-if="coupon.status === 0" @click="useCoupon(coupon)">
            立即使用
          </view>
        </view>
      </view>
    </view>
    
    <el-empty v-if="couponList.length === 0" description="暂无优惠券"></el-empty>
    
    <view class="coupon-banner" @click="goCouponCenter">
      <el-icon name="coupon"></el-icon>
      <view class="banner-text">领取更多优惠券</view>
      <el-icon name="arrow-right"></el-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'unused',
      couponList: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  onLoad() {
    this.getCouponList(true)
  },
  onReachBottom() {
    if (this.hasMore) {
      this.page++
      this.getCouponList(false)
    }
  },
  methods: {
    async getCouponList(refresh = false) {
      if (refresh) {
        this.page = 1
        this.hasMore = true
      }
      
      try {
        const res = await this.$api.get('/coupon/list', {
          status: this.activeTab === 'unused' ? 0 : (this.activeTab === 'used' ? 1 : 2),
          page: this.page,
          pageSize: this.pageSize
        })
        
        if (refresh) {
          this.couponList = res.list
        } else {
          this.couponList = [...this.couponList, ...res.list]
        }
        
        this.hasMore = res.list.length === this.pageSize
      } catch (error) {
        this.$toast.fail(error.message || '获取优惠券列表失败')
      }
    },
    tabChange(tab) {
      this.activeTab = tab
      this.getCouponList(true)
    },
    useCoupon(coupon) {
      // 返回优惠券信息给调用页面
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      
      if (prevPage && prevPage.route.includes('order/confirm')) {
        prevPage.setData({
          selectedCoupon: coupon
        })
        uni.navigateBack()
      } else {
        // 如果不是从订单确认页进入，则跳转到商品列表页
        uni.navigateTo({
          url: `/pages/goods/list?couponId=${coupon.id}`
        })
      }
    },
    goCouponCenter() {
      uni.navigateTo({
        url: '/pages/coupon/center'
      })
    }
  }
}
</script>

<style>
.coupon-list {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.coupon-tabs {
  background-color: #fff;
  margin-bottom: 15px;
}
.coupon-container {
  padding: 0 15px;
}
.coupon-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}
.coupon-item.expired {
  opacity: 0.6;
}
.coupon-left {
  width: 30%;
  background-color: #f56c6c;
  color: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.coupon-left::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 10px;
  background-image: radial-gradient(circle at 0 50%, transparent 0, transparent 7px, #fff 7px, #fff 10px);
  background-size: 10px 20px;
  background-repeat: repeat-y;
}
.coupon-amount {
  margin-bottom: 5px;
}
.amount-symbol {
  font-size: 16px;
}
.amount-value {
  font-size: 28px;
  font-weight: bold;
}
.coupon-condition {
  font-size: 12px;
  text-align: center;
}
.coupon-right {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-name {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 5px;
}
.coupon-time {
  font-size: 12px;
  color: #666;
}
.coupon-action {
  align-self: flex-end;
  color: #f56c6c;
  border: 1px solid #f56c6c;
  border-radius: 15px;
  padding: 3px 15px;
  font-size: 12px;
}
.coupon-banner {
  background-color: #fff;
  padding: 15px;
  margin: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f56c6c;
}
.coupon-banner .el-icon:first-child {
  font-size: 20px;
  margin-right: 10px;
}
.coupon-banner .el-icon:last-child {
  font-size: 16px;
  margin-left: 10px;
}
.banner-text {
  font-size: 16px;
}
</style>    